<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>证券应收应付库存</title>

    <link href="layui/css/layui.css" rel="stylesheet">
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/html" id="securityToolBar">
<!--        <div class="layui-btn-container">-->
            <!-- 增加按钮        增加按钮         增加按钮-->
            <button class="layui-btn layui-btn-sm" lay-event="insert" ><i
                    class="layui-icon">&#xe654;</i>新增
            </button>
            <!-- 删除按钮        删除按钮          删除按钮-->
            <button class="layui-btn layui-btn-sm" lay-event="deleteAll">批量删除</button>
            <!--    按条件搜索-->
            <div class="layui-inline layui-show-xs-block" style="margin-left: 200px">
                    <label class="layui-form-label" style="width: 110px;text-align: center;">证券类型</label>
                    <div class="layui-inline layui-show-xs-block">
                        <select name="securityType" id="securityType">
                            <option value="">请选择</option>
                            <option value="1">1号证券类型</option>
                            <option value="2">2号证券类型</option>
                            <option value="3">3号证券类型</option>
                            <option value="3">4号证券类型</option>
                        </select>
                    </div>
                    <!--        表格上方日期-->
                    <div class="layui-inline layui-show-xs-block">
                        <label class="layui-form-label" style="width: 110px;text-align: center">业务日期</label>
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="请选择业务日期" name="securityInventoryTime" id="securityInventoryTime">
                        </div>
                    </div>
                    <!--        搜索-->
                    <div class="layui-inline layui-show-xs-block">
                        <button class="layui-btn layui-btn-primary" lay-submit="" lay-event="search" lay-filter="search"><i class="layui-icon">&#xe615;</i>搜索
                        </button>
                    </div>
            </div>
    </script>
    <script type="text/javascript">
        layui.use(['table', 'form','laydate'],function () {
            var table = layui.table;
            var form = layui.form;
            var $ = layui.jquery;
            var laydate = layui.laydate;

            //温馨提示：默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据。
            //详见：/docs/modules/table.html#totalRow
            table.render({
                elem: '#security',
                url: '/selectSecurityInventory',
                limits: [5, 8, 10, 15],
                page: true,
                height:'full-20',
                toolbar: '#securityToolBar',
                cellMinWidth: 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增,
                cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    , {field: 'securityInventoryId', title: '证券应收应付库存id', fixed: 'left', unResize: true, sort: true, totalRowText: '合计'}
                    , {field: 'fundId', title: '基金编号', edit: 'text'}
                    , {field: 'securityId', title: '证券编号', edit: 'text'}
                    , {field: 'securityName', title: '证券名称', edit: 'text'}
                    , {field: 'businessStatu', title: '业务状态', edit: 'text'}
                    , {field: 'cashId', title: '现金Id', edit: 'text'}
                    , {field: 'securityInventoryTime', title: '业务日期', edit: 'text'}
                    , {field: 'securityTotalAmount', title: '总金额', edit: 'text'}
                    , {field: 'securityType', title: '证券类型',templet: function (item) {
                            if(item.securityType=='1') {return '1号';
                            } else if(item.securityType=='2'){ return '2号';
                            } else if (item.securityType=='3'){ return '3号';
                            }else if (item.securityType=='4'){return '4号';
                            }
                        }}
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo'}
                ]]
            });
            laydate.render({
                elem:'#securityInventoryTime'
            })
            table.on('toolbar(security)',function (obj) {
                //根据事件对象 来判定点击的是哪一个案例
                if(obj.event=='insert'){
                    layer.open({
                        type:1,
                        area:['1000px','550px'],
                        content: $("#securityContent")
                    });
                }else if(obj.event=='search'){
                    var securityType = $("#securityType").val();
                    var securityInventoryTime = $("#securityInventoryTime").val();
                    table.reload('security', {
                        url: 'selectSecurityInventory',
                        method: 'post'
                        , where: {
                            'securityType':securityType,
                            'securityInventoryTime':securityInventoryTime
                        }
                    });
                    laydate.render({
                        elem: '#securityInventoryTime'
                    });
                }
            });
            form.on('submit(addsubmit)', function () {
                alert("增加 增加 增加")
                //发送ajax请求到服务器
                //得到表单的所有数据
                var formData = form.val("securityForm");
                alert('formData=' + formData);
                $.post({
                    url: "/insertSecurityInventory",
                    data: formData,
                    function(msg) {
                        if (msg === "yes") {
                            alert("进来了吗？");
                            table.reload('userTable');
                            parent.layer.msg('添加成功', {
                                title: '提示',
                                area: ['200px',
                                    '140px'],
                                time: 5000
                            });
                        } else {
                            layer.msg("增加失败，请重新输入");
                        }
                    }
                    //重新刷新表格
                })
            });
            //给增加的form绑定提交事件
            form.on('submit(securityForm)',function () {
                //发送ajax请求到 服务器，
                //得到表单的所有数据
                var formData= form.val("securityForm");
                $.post(
                    "22-22-22",
                    formData,
                    function(msg) {
                        //重新刷新表格
                        //给予提示信息，增加成功
                        alert(msg);
                    });
            });
            /*修改    修改*/
            table.on('tool(security)',function (obj) {
                switch (obj.event) {
                    case "edit":
                        //得到选中行的数据
                        var data=obj.data;
                        //JSON.stringify(data)  拼接成JSON格式的字符串
                        var userObj=$.parseJSON(JSON.stringify(data));
                        //弹出一个修改的窗口
                        form.val("roleUpdateform",userObj);
                        layer.open({
                            type:1, //iframe 内嵌窗口
                            area:['1000px','550px'],
                            content: $("#editContent")
                        });

                        break;
                    case "del":
                        alert("这是删除的操作");
                        var data=obj.data;
                        var userObj=$.parseJSON(JSON.stringify(data));
                        alert(userObj.securityInventoryId);
                        $.ajax({
                            url:"/deleteSecurityInventory",
                            type:"post",
                            data:"securityInventoryId="+userObj.securityInventoryId,
                            dataType:"text",
                            contentType:"application/x-www-form-urlencoded",
                        });
                        window.location.reload();
                        break;
                }
            });

            //权限下拉列表
            /* $.ajax({
                 url:'/roleInserts',//从后台拿到所有种类
                 dataType:'json',
                 //type:'post',
                 success:function(data){
                     $.each(data,function(index,item){
                         console.log(item+index);
                         console.log(item.username,item.username);
                         //option 第一个参数是页面显示的值，第二个参数是传递到后台的值
                         $('#cgId').append(new Option(data[index].roleDesc,data[index].roleDesc));//往下拉菜单里添加元素
                         $('#cgIdi').append(new Option(data[index].roleName,data[index].roleName));//往下拉菜单里添加元素
                         //设置value（这个值就可以是在更新的时候后台传递到前台的值）为1的值为默认选中
                         //$('#cgId').val(1);
                         $('#cgId').val("--请选择--");
                     })
                     form.render(); //更新全部表单内容
                     //form.render('select'); //刷新表单select选择框渲染
                 }
             });*/

            //给修改的form绑定提交事件
            form.on('submit(roleUpdateform)',function () {
                //发送ajax请求到 服务器，
                //得到表单的所有数据
                var formData= form.val("roleUpdateform");
                $.post(
                    "/updateSecurityInventory",
                    formData,
                    function(msg) {
                        //重新刷新表格
                        //给予提示信息，增加成功
                        alert(msg);

                    });
            });
            laydate.render({
                elem: '#test20'
            });
            laydate.render({
                elem: '#test30'
                ,theme: '#393D49'
            });

        });



        layui.use(['tableSelect'],function () {
            //加载用到layui组件
            var form = layui.form;
            var $=layui.$;
            var tableSelect = layui.tableSelect;
            //下拉表格 的渲染
            tableSelect.render({
                elem: '#securityName',//渲染表格 与 文本框绑定
                searchKey:'securityName',//后端根据这个名称得到下拉表格中文本框的值
                table: {
                    url: 'select?securityName=',//数据接口
                    cols: [[
                        {type: 'radio'},
                        {field:'securityId',title: '证券编号'}
                        ,{field:'securityName',title: '证券名称'}
                        ,{field:'securitType',title: '证券类型'}
                    ]]
                },
                //回调函数
                done: function (elem, data) {
                    var Name='';
                    //遍历选中的数据
                    $.each(data.data,function (index,item) {
                        Name=item.securityName;
                        $("#securityId").val(item.securityId);
                        $("#securityName").val(item.securityName);
                        $("#securitType").val(item.securitType);
                    });
                    elem.val(Name);//给输入框里显示的值赋值
                }
            })
        })

        layui.use(['tableSelect'],function () {
            //加载用到layui组件
            var form = layui.form;
            var $=layui.$;
            var tableSelect = layui.tableSelect;
            //下拉表格 的渲染
            tableSelect.render({
                elem: '#updateSecurityName',//渲染表格 与 文本框绑定
                searchKey:'updateSecurityName',//后端根据这个名称得到下拉表格中文本框的值
                table: {
                    url: 'select?securityName=',//数据接口
                    cols: [[
                        {type: 'radio'},
                        {field:'securityId',title: '证券编号'}
                        ,{field:'securityName',title: '证券名称'}
                        ,{field:'securitType',title: '证券类型'}
                    ]]
                },
                //回调函数
                done: function (elem, data) {
                    var Name='';
                    //遍历选中的数据
                    $.each(data.data,function (index,item) {
                        Name=item.updateSecurityId;
                        $("#updateSecurityId").val(item.securityId);
                        $("#updateSecurityName").val(item.securityName);
                        $("#updateSecuritType").val(item.securitType);
                    });
                    elem.val(Name);//给输入框里显示的值赋值
                }
            })
        })
    </script>

</head>

<body>

<table id="security" lay-filter="security"></table>
<!-- 给表单右测增加超链接-->
<div style="display: none;" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">
        <i class="layui-icon">&#xe642;</i>编辑</a>
    <button  class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
        <i class="layui-icon">&#xe640;</i>删除</button>
</div>
<!--增加的窗口-->

<div id="securityContent"
     style="display: none; height: 100%; height: 100%; text-align: center;">
    <!--form表单 lay-filter 绑定事件 若有多个form 筛选作用-->
    <form id="securityForm" lay-filter="securityForm"
          class="layui-form layui-form-pane"
          style="margin: 30px auto; display: inline-block;">
        <!--<div class="layui-form-item" style="text-align: center;">
            &lt;!&ndash;标签&ndash;&gt;
            <label class="layui-form-label">证券库存id</label>
            <div class="layui-input-inline">
                <input type="text" name="securityInventoryId" lay-verify="required"
                       autocomplete="off" placeholder="证券库存id" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">基金编号</label>
            <div class="layui-input-inline">
                <input type="text" name="fundId" lay-verify="required"
                       autocomplete="off" placeholder="基金编号" class="layui-input">
            </div>
        </div>-->

        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">证券编号</label>
            <div class="layui-input-inline">
                <input type="text" name="securityId" lay-verify="required"
                       autocomplete="off" placeholder="基金编号" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">证券名称</label>
            <div class="layui-input-inline">
                <input type="text" name="securityName" id="securityName" lay-verify="required"
                       autocomplete="off" placeholder="证券名称" class="layui-input">
                <input type="text" id="securityId" hidden>
                <input type="number" id="securitType" hidden>
            </div>
        </div>
       <!-- <div class="layui-form-item" pane>
            <label class="layui-form-label">证券名称</label>
            <div class="layui-input-inline">
                <input type="text" name="securityName" lay-verify="required"
                       autocomplete="off" placeholder="证券名称 " class="layui-input">
            </div>
        </div>-->


        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">业务状态</label>
            <div class="layui-input-inline">
                <input type="number" name="businessStatu" lay-verify="required"
                       autocomplete="off" placeholder="业务状态 " class="layui-input">

            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">现金Id</label>
            <div class="layui-input-inline">
                <input type="text" name="cashId" lay-verify="required"
                       autocomplete="off" placeholder="现金Id" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">业务日期</label>
            <div class="layui-input-inline">
                <input type="date" name="securityInventoryTime" lay-verify="required"
                       autocomplete="off" placeholder="业务日期" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">总金额</label>
            <div class="layui-input-inline">
                <input type="number" name="securityTotalAmount" lay-verify="required"
                       autocomplete="off" placeholder="总金额" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">证券类型</label>
            <div class="layui-input-inline">
                <select name="securityType">
                    <option value="">请选择</option>
                    <option value="1">1号</option>
                    <option value="2">2号</option>
                    <option value="3">3号</option>
                    <option value="4">4号</option>
                </select>
            </div>
        </div>

        <div style="position: relative; bottom: 0;">
            <!--lay-submit="" 具备提交功能  lay-filter   具有筛选作用-->
            <button class="layui-btn" lay-submit="" lay-filter="addsubmit">
                <i class="layui-icon">&#x1005;</i>添加
            </button>
            <button class="layui-btn layui-bg-red cancel" type="button">
                <i class="layui-icon">&#x1006;</i>取消
            </button>
        </div>
    </form>
</div>


<!--修改窗口-->
<div id="editContent"
     style="display: none; height: 100%; height: 100%; text-align: center;">
    <!--form表单 lay-filter 绑定事件 若有多个form 筛选作用-->
    <form id="roleUpdateform" lay-filter="roleUpdateform"
          class="layui-form layui-form-pane"
          style="margin: 30px auto; display: inline-block;">
        <div class="layui-form-item" style="text-align: center;">
            <!--标签-->
            <label class="layui-form-label">证券应收应付库存id</label>
            <div class="layui-input-inline">
                <!--输入框  lay-verify =“required” 必填-->
                <input type="text" name="securityInventoryId" lay-verify="required"
                       readonly  autocomplete="off" placeholder="证券应收应付库存id" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">基金编号</label>
            <div class="layui-input-inline">
                <input type="text" name="fundId" lay-verify="required"
                       autocomplete="off" placeholder="请输入 基金编号:" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">证券编号：</label>
            <div class="layui-input-inline">
                <input type="text" name="securityId" id="updateSecurityName" lay-verify="required"
                       autocomplete="off" placeholder="请输入证券名称:" class="layui-input">
                <input type="text" id="updateSecurityId" hidden>
                <input type="number" id="updateSecuritType" hidden>
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">证券名称：</label>
            <div class="layui-input-inline">
                <input type="text" name="securityName" lay-verify="required"
                       autocomplete="off" placeholder="请输入证券名称:" class="layui-input">

            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label"> 业务状态：</label>
            <div class="layui-input-inline">
                <input type="number" name="businessStatu" lay-verify="required"
                       autocomplete="off" placeholder="请输入 业务状态:" class="layui-input">

            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">现金Id：</label>
            <div class="layui-input-inline">
                <input type="text" name="cashId" lay-verify="required"
                       autocomplete="off" placeholder="请输入现金Id:" class="layui-input">
·
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">业务日期：</label>
            <div class="layui-input-inline">
                <input type="date" name="securityInventoryTime" lay-verify="required"
                       autocomplete="off" placeholder="请输入业务日期:" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">总金额：</label>
            <div class="layui-input-inline">
                <input type="number" name="securityTotalAmount" lay-verify="required"
                       autocomplete="off" placeholder="请输入总金额:" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">证券类型</label>
            <div class="layui-input-inline">
                <select name="securityType">
                    <option value="">请选择</option>
                    <option value="1">1号</option>
                    <option value="2">2号</option>
                    <option value="3">3号</option>
                    <option value="4">4号</option>
                </select>
            </div>
        </div>
        <div style="position: absolute; bottom: 0px; left: 45%;">
            <!--lay-submit="" 具备提交功能  lay-filter   具有筛选作用-->
            <button class="layui-btn" lay-submit="" lay-filter="udateSubmit">
                <i class="layui-icon">&#x1005;</i>修改
            </button>
            <button class="layui-btn layui-bg-red cancel" type="button">
                <i class="layui-icon">&#x1006;</i>取消
            </button>
        </div>
    </form>
</div>
</body>
</html>